<template>
  <div class="app-container">
    <a-title></a-title>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="业务名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入业务名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="queryParams.businessStartTime"
          size="small"
          style="width: 220px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="业务类别" prop="status">
        <el-cascader
          :options="categoryOptions"
          :show-all-levels="false"
          v-model="queryParams.businessCategoryId"
          :props="{ value: 'id' }"
          @change="getLastNodes"
          filterable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="业务状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择业务状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="viewList">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="tablebox">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column label="项目名称" prop="projectName"></el-table-column>
        <el-table-column label="业务名称" prop="name"></el-table-column>
        <el-table-column label="推荐状态" prop="status">
          <template slot-scope="scope">
            <el-tag :type="scope.row.statusType " disable-transitions>{{scope.row.statusText}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态说明" prop="statusRemark"></el-table-column>
        <el-table-column label="开始时间" prop="businessStartTime"></el-table-column>
        <el-table-column label="项目负责人" prop="projectLeader"></el-table-column>
        <el-table-column label="项目经理" prop="projectManager"></el-table-column>
        <el-table-column label="业务类别" prop="menuName"></el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <a @click="handleView(scope.$index, scope.row)">业务主页</a>
            <a @click="handleEdit(scope.$index, scope.row)">编辑</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
      <div slot="title"></div>
      <div class="tabletitle">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目名称</div>
              <div class="input-content">
                <el-input v-model="project.projectName" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务名称</div>
              <div class="input-content">
                <el-input v-model="project.name" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务编号</div>
              <div class="input-content">
                <el-input v-model="project.sectionNumber" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">开始时间</div>
              <div class="input-content">
                <el-input v-model="project.businessStartTime" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目负责人</div>
              <div class="input-content">
                <el-input v-model="project.projectLeader" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目经理</div>
              <div class="input-content">
                <el-input v-model="project.projectManager" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务类别</div>
              <div class="input-content">
                <el-input v-model="project.menuName" placeholder="请输入" :disabled="true"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务状态</div>
              <div class="input-content">
                <el-select v-model="project.status" placeholder="请选择">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">状态说明</div>
              <div class="input-content">
                <el-input
                  v-model="project.statusRemark"
                  placeholder="请输入"
                  type="textarea"
                  :rows="4"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils'
import Layout from '@/layout'
import { businessView, bmsMenuTreeselect, updateBusiness } from '@/api/business/businessGlance'
import { treeselect } from '@/api/system/business_category'

import aTitle from '@/components/Title'
export default {
  name: 'businessGlance',
  components: { aTitle },
  data () {
    return {
      loading: true,
      total: 0,
      dialogVisible: false,
      businessRoutes: [],
      statusOptions: [],
      categoryOptions: [],
      tableData: [],
      project: {
        projectName: '',
        name: '',
        sectionNumber: '',
        businessStartTime: '',
        projectLeader: '',
        projectManager: '',
        menuName: '',
        status: '',
        statusRemark: ''
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectName: undefined,
        name: undefined,
        businessStartTime: undefined,
        businessCategoryId: undefined,
        status: undefined
      },
    }
  },
  created () {
    this.viewList()
    this.getDicts("business_status").then(response => {
      this.statusOptions = response.data;
    });
    treeselect().then(res => {
      if (res.code === 200) {
        this.categoryOptions = res.data
      }
    })
  },
  mounted(){
    document.title=document.getElementById("businessNameTitle").innerHTML;
  },
  methods: {
    viewList () {
      console.log(this.queryParams)
      this.loading = true
      //查询业务列表
      businessView(this.queryParams).then(res => {
        if (res.code === 200) {
          this.total = res.total
          this.tableData = res.rows.map(item => {
            item.businessStartTime = formatDate(item.businessStartTime)
            if (item.status === "01") {
              item.statusText = "筹备";
              item.statusType = ''
            } else if (item.status === "02") {
              item.statusText = "进行中";
              item.statusType = 'info'
            } else if (item.status === "03") {
              item.statusText = "成果交付";
              item.statusType = 'success'
            } else if (item.status === "04") {
              item.statusText = "项目暂停";
              item.statusType = 'danger'
            } else if (item.status === "05") {
              item.statusText = "项目终止";
              item.statusType = 'warning'
            }
            return item
          })
          this.loading = false
        }
      })
    },
    reset () {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      this.queryParams.projectName = undefined;
      this.queryParams.name = undefined;
      this.queryParams.businessStartTime = undefined;
      this.queryParams.businessCategoryId = undefined;
      this.queryParams.status = undefined;
      this.viewList()
    },
    handleEdit (index, row) {
      console.log(row)
      this.project = { ...row }
      this.dialogVisible = true
    },
    sumbit () {
      updateBusiness(this.project).then(res => {
        if (res.code === 200) {
          this.viewList()
          this.msgSuccess(res.msg);
        }
        console.log(res)
      })
    },
    handleView (index, row) {
      // bmsMenuTreeselect (1).then(res => {

      // })
      // this.dialogVisible = true

    },
    getLastNodes (val) {
      this.queryParams.businessCategoryId = val[val.length - 1];
    },
    handleSizeChange (val) {
      this.queryParams.pageSize = val
      this.viewList()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.queryParams.pageNum = val
      this.viewList()
      console.log(`当前页: ${val}`);
    },
    a () {

      this.businessRoutes = [{
        name: 'businessGeneral',
        path: '/businessWorkbench/businessGeneral',
        component: "Layout",
        meta: {
          title: "业务概况",
          isMenu: true
        },
      }]
      sessionStorage.setItem('menuTitle', "上海萍苗包装纸箱有限公司建设项目环境影响评价报告表,项目工作台建议书编制")
      sessionStorage.setItem('projectRoutes', JSON.stringify(this.businessRoutes))
      let routeData = this.$router.resolve({
        path: "/businessWorkbench/businessGeneral",
        // query: {
        //   name: 'lei',
        //   age: 18,
        //   phoneNum: 12345678901
        // }
      });
      window.open(routeData.href, '_blank');
    }
  }
}
</script>
<style lang="scss" scoped>
.tabletitle {
  margin: 0 20px;
  .input-wrap {
    padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 6em;
      color: rgba(0, 0, 0, 0.65);
      margin-right: 8px;
      display: flex;
      margin-top: 9px;
      flex: 0 0 90px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      .el-select {
        width: 100%;
      }
    }
  }
}
.tablebox {
  margin-top: 20px;
  height: 100%;
}
/deep/.el-table .cell {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  text-align: center;
  a {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin: 0 10px;
  }
}

.el-pagination {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
}

/deep/.el-cascader--medium {
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
</style>